簡介：你是否也有過這樣的“煩惱”：
* 對前端技術(shù)感興趣不知道從何學(xué)起？
* 想從事前端工作卻沒有基礎(chǔ)？
想要成為一名合格的前端工作者，HTML與CSS是必不可少的技能，但是對于新手工程師來講，這部分也是最難掌握的。
本門課程專為零基礎(chǔ)學(xué)員設(shè)計，囊括了目前使用比較廣泛的HTML+CSS基礎(chǔ)知識，以知識點結(jié)合小案例的形式書寫代碼，學(xué)與練結(jié)合，幫助學(xué)員順利入門。
課程從最基本的概念講起，逐步深入，帶你學(xué)習(xí)HTML(5)和CSS(3)樣式基礎(chǔ)知識，了解各種常用標簽的意義以及基本用法，講解CSS(3)樣式代碼添加，為后續(xù)更深入的學(xué)習(xí)打好基礎(chǔ)。
通過本門課程的學(xué)習(xí)，你可以基本掌握前端必備的HTML+CSS樣式基礎(chǔ)知識，并可以利用這些知識實現(xiàn)靜態(tài)頁面。
第1章 HTML5介紹
本章節(jié)主要講解html5和css3樣式的關(guān)系，以及html5標簽語法，文檔結(jié)構(gòu),最后講解了在html5中的注釋代碼的作用。
第2章 HTML5語義化標簽
本章節(jié)主要講解html5中常用語義化標簽，知道哪部分使用什么標簽。
- 編程： 2-1 語義化，讓你的網(wǎng)頁更好的被搜索引擎理解
- 編程： 2-2 開始我們的第一段對話吧- 段落標簽
- 編程： 2-3 diy一個標簽吧 - 使用<span>標簽自定義文字樣式
- 編程： 2-4 做個標題黨 - 使用<hx>標簽為網(wǎng)頁增加標題
- 編程： 2-5 我還想diy點樣式- 使用<div>標簽自定義塊
- 編程： 2-6 聽說開頭寫的好就能一鍵三連 - <header>標簽定義頭部區(qū)域
- 編程： 2-7 結(jié)尾神轉(zhuǎn)折 - <footer>標簽定義底部區(qū)域
- 編程： 2-8 正文才是重點喔 - <section>定義區(qū)段
- 編程： 2-9 再加個側(cè)邊菜單吧 - <aside>定義側(cè)邊欄區(qū)域
第3章 HTML5效果標簽
本章主要講解效果標簽，為網(wǎng)頁可以添加換行，空格，水平線等效果。
第4章 HTML5列表標簽
本章主要講解兩種列表標簽效果，主要用于列表項。
第5章 HTML5圖片，鏈接及表格標簽
本章節(jié)主要講解圖片，鏈接及table標簽使用，學(xué)完本章，我們可以在網(wǎng)頁上展示一些圖片及表格數(shù)據(jù)，使網(wǎng)頁上的信息更加豐富
第6章 HTML5表單標簽，與瀏覽者交互
我們每天都在網(wǎng)上沖浪，如果沒有表單，人們就無法輸入自己的個人信息來買東西，本章節(jié)主要從表單的作用、表單元素講起，學(xué)習(xí)完本章，可以制出簡單的用戶登陸、注冊頁面。
- 編程： 6-1 使用表單標簽，與用戶交互 - 使用<form>創(chuàng)建表單
- 編程： 6-2 先來填用戶名和密碼 - 文本輸入框、密碼輸入框
- 編程： 6-3 給點提示唄 - placeholder屬性的使用
- 編程： 6-4 在家呆多少天啦? - 數(shù)字輸入框
- 編程： 6-5 平時都逛論壇么? - 網(wǎng)址輸入框
- 編程： 6-6 留個郵箱,方便通知消息 - 郵箱輸入框
- 編程： 6-7 留下您寶貴的意見 - 使用<textarea>標簽創(chuàng)建文本域
- 編程： 6-8 使用label為input標簽穿上衣服
- 編程： 6-9 填填性別和興趣愛好 - 單選框、復(fù)選框，讓用戶選擇
- 編程： 6-10 使用select、option標簽創(chuàng)建下拉菜單
- 編程： 6-11 填完就可以提交咯 - 提交按鈕
- 編程： 6-12 使用重置按鈕，重置表單信息
第7章 CSS3介紹，為網(wǎng)頁添加樣式
CSS3是一個很神奇的東西，設(shè)計者可以通過修改樣式表的定義而使網(wǎng)頁呈現(xiàn)出完全不同的外觀。本章就開始帶領(lǐng)大家來學(xué)習(xí)CSS3樣式：先來認識CSS3樣式、了解CSS3樣式的優(yōu)勢、CSS3代碼語法，CSS3注釋代碼和CSS3鏈接方式以及優(yōu)先級。
第8章 CSS3選擇器
本章主要介紹CSS的選擇器，通過學(xué)習(xí)本章，我們能對元素進行樣式的設(shè)置
第9章 CSS3的繼承，優(yōu)先級和重要性
CSS中有一些概念是需要深刻理解的，此節(jié)開始將介紹CSS中的一些非常重要的概念包括CSS的繼承，優(yōu)先級和重要性
第10章 CSS3字體樣式
本章將詳細介紹網(wǎng)頁排版中字體要素，幫助讀者把CSS3技術(shù)與網(wǎng)頁字體緊密結(jié)合在一起，實現(xiàn)網(wǎng)頁實用性與欣賞性相結(jié)合，實現(xiàn)出設(shè)計效果。
第11章 CSS3文本樣式
本章節(jié)主要介紹文本中常用的下劃線，縮進，行高，文本對齊方式，以及透明色，長度值等設(shè)置，讓頁面中文本樣式看起來更美觀一些。
第12章 CSS3盒模型
盒模型是CSS布局的基石，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系。本章將圍繞盒模型的概念、結(jié)構(gòu)、尺寸等基礎(chǔ)知識展開研究，以便為后面的學(xué)習(xí)和日后網(wǎng)頁設(shè)計奠定扎實的基礎(chǔ)。
- 編程： 12-1 給元素分個類 - 元素分類
- 編程： 12-2 我要獨占一行 - 塊級元素
- 編程： 12-3 我要和你站一起 - 內(nèi)聯(lián)元素
- 編程： 12-4 我還要站個大位置 - 內(nèi)聯(lián)塊狀元素
- 編程： 12-5 隱身術(shù) - none不占據(jù)位置
- 視頻： 12-6 變個盒子-什么是盒模型（視頻） (02:14)
- 編程： 12-7 長胖長高點--寬度和高度
- 編程： 12-8 設(shè)置個美美噠的顏色-背景色
- 編程： 12-9 畫個圈圈 - 使用border為盒子添加邊框（一）
- 編程： 12-10 我想腳下踩條線 - 使用border為盒子添加邊框（二）
- 編程： 12-11 加個圓角 - 使用border-radius設(shè)置圓角
- 編程： 12-12 宰相肚里能撐船 - 使用padding為盒子設(shè)置內(nèi)邊距（填充）
- 編程： 12-13 距離產(chǎn)生美 - 使用margin為盒子設(shè)置外邊距（邊界）
第13章 CSS3布局模型
現(xiàn)在可以用所需的知識進行真正設(shè)計了，學(xué)習(xí)完本章節(jié)可以運用所學(xué)習(xí)的知識實現(xiàn)網(wǎng)頁的多列布局，本章將圍繞流動模型、浮動模型、層布局模型等布局技術(shù)展開研究，以便為后面制作復(fù)雜的網(wǎng)頁打下基礎(chǔ)。
第14章 flex彈性盒模型
本章講解flex布局的設(shè)置以及常用相關(guān)屬性，能夠更好，更快速的實現(xiàn)網(wǎng)頁布局。
第15章 css樣式設(shè)置小技巧
本章節(jié)對在日常前端開發(fā)中常用到css樣式設(shè)置小技巧進行了講解。